<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./carousel.css"> -->
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
            text-decoration: none;
        }
        
        img {
            width: 100%;
            height: 100%;
        }
        
        .wrap {
            margin: 100px auto;
            width: 490px;
            height: 170px;
            overflow: hidden;
            position: relative;
        }
        
        ul li {
            width: 490px;
            height: 170px;
        }
        
        #list {
            position: absolute;
            bottom: 5px;
            right: 45%;
        }
        
        #list li {
            float: left;
            background-color: pink;
            color: #fff;
            font-size: 15px;
            height: 20px;
            line-height: 20px;
            width: 20px;
            margin-right: 1px;
            text-align: center;
            border-radius: 50%;
            cursor: pointer;
        }
        
        #list .on {
            background-color: #088bcf;
            color: #fff;
        }
        /* 两侧导航栏 */
        
        a {
            position: absolute;
            width: 20px;
            height: 30px;
            line-height: 30px;
            top: 50%;
            margin-top: -15px;
            background-color: black;
            color: #fff;
            display: none;
        }
        
        .left {
            left: 0;
        }
        
        .right {
            right: 0;
            text-align: right;
        }
        
        .wrap:hover a {
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <!-- 图片 -->
        <ul>
            <li><img src="./img/1.jpg" alt=""></li>
            <li><img src="./img/2.jpg" alt=""></li>
            <li><img src="./img/3.jpg" alt=""></li>
        </ul>
        <!-- 原点 -->
        <ol id="list" type="a">
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
        </ol>
        <!-- 两侧导航栏 -->
        <a href="#" class="left">
            &lt;
        </a>
        <a href="#" class="right">
            &gt;
        </a>

    </div>
    <!-- <script src="./carousel.js"></script> -->
    <script>
        let div = document.querySelector('div');
        let ul = document.querySelector('ul');

        let list = document.querySelector("#list");
        let lis = list.querySelectorAll("li");
        let right = document.querySelector('.right');
        let left = document.querySelector('.left');
        let index = 0;

        // 自动轮播
        function atuo() {
            timer = setInterval(function() {
                index++
                if (index > lis.length - 1) {
                    index = 0
                }
                change(index)
            }, 1500);
        }
        atuo();
        // 轮播函数，切换图片 切换圆点
        function change(curIndex) {
            // console.log(curIndex);
            // ul便宜距离 切换图片 改变ul上边距实现图片切换效果
            ul.style.marginTop = -170 * curIndex + 'px'
            for (let i = 0; i < lis.length; i++) {
                // 让当前所有的圆点类名为空
                lis[i].className = "";
            }
            lis[curIndex].className = "on";
            index = curIndex
        }

        // 鼠标移动到轮播图区域时停止轮播
        div.onmouseover = function() {
            ul.style.cursor = "pointer";
            // clearInterval(timer)
            clearTimeout(timer)
                // 停止计时器
        }

        // 鼠标离开时开启自动轮播
        div.onmouseout = atuo;

        // 鼠标滑到圆点上切换到对应图片
        for (let i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onmouseover = function() {
                change(this.index);
            }
        }

        // 按钮事件 右侧按钮 切换图片 切换圆点
        let num = 0;
        let circle = 0;

        right.addEventListener("click", function() {
                if (num == ul.children.length - 1) {
                    ul.style.marginTop = 0;
                    num = 0;
                }
                // console.log(ul.children.length - 1);
                // 偏移距离
                ul.style.marginTop = -170 * num + "px";
                num++;
                // 点击右侧按钮圆点跟着变化
                circle++;
                if (index == ul.children.length - 1) {
                    circle = 0;
                }
                change(circle);
            })
            // 左侧按钮
        left.addEventListener("click", function() {
            if (num == 0) {
                ul.style.marginTop = -170 * num + "px";
                num = ul.children.length - 1;
            }
            // console.log(ul.children.length - 1);
            // 偏移距离
            ul.style.marginTop = -170 * num + "px";
            num--
            // 点击右侧按钮圆点跟着变化
            circle--;
            if (index == 0) {
                circle = ul.children.length - 1;
            }
            change(circle);
        })
    </script>
</body>

</html>